<template>
  <div style='background-color: #fff;' class='revolve-verification-code flex-column align-center pd-30'>
    <span>安全验证</span>
    <span>滑动滑块,使图片角度为正</span>
    <img :style='`transform: rotate3d(0, 0, 1, ${initRotateDeg-rotateDeg}deg)`' src='@/assets/img/success.png' />
    <div class='w-100P'>
      <el-slider v-model='rotateDeg' :min='0' :max='360' :show-tooltip='false' @change='handleChange'></el-slider>
    </div>
  </div>
</template>

<script>
  /**
   * 旋转图片验证码
   */
  export default {
    name: 'RevolveVerificationCode',
    data() {
      return {
        initRotateDeg: Number(Math.random() * 100) % 360,
        rotateDeg: 0,
      }
    },
    methods: {
      handleChange() {
        let result = (this.initRotateDeg - this.rotateDeg)
        result = (result ^ (result >> 31)) - (result >> 31)
        console.log(result)
        if (result > 20) {
          this.rotateDeg = 0
        } else {
          this.$emit('verify', true)
        }
      },
    },
  }
</script>

<style scoped lang='scss'>

</style>
